<template>
	<view class="map_box" @click="hideMask">
		<!-- #ifdef H5-->
		<view id="PublicMap"></view>
		<view class="map_legend">
			<view class="legend_item">
				<image src="../../static/city-manage/case.png"></image>
				<text class="legend_text">案件位置</text>
			</view>
			<view class="legend_item">
				<image src="../../static/city-manage/uni-address.png"></image>
				<text class="legend_text">我的位置</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<image @click="hideMask" class="close_map1" src="../../static/city-manage/close_map.png"></image>
		<view class="mapview">
			<map class="H5_map" :latitude="latitude" :longitude="longitude" :markers="covers" scale="16">
				<!-- <cover-image class="imgSize imgSize1" src="../../static/city-manage/case.png"></cover-image> <cover-view class="textSize textSize1">案件位置</cover-view>
				<cover-image class="imgSize" src="../../static/city-manage/uni-address.png"></cover-image> <cover-view  class="textSize">我的位置</cover-view> -->
			</map>
			<view class="map_legend">
				<view class="legend_item">
					<image src="../../static/city-manage/case.png"></image>
					<text class="legend_text">案件位置</text>
				</view>
				<view class="legend_item">
					<image src="../../static/city-manage/uni-address.png"></image>
					<text class="legend_text">我的位置</text>
				</view>
			</view>
		</view>
		<!-- #endif -->

	</view>
</template>

<script>
	export default{
		name: 'publicMap',
		props: ['gdx', 'gdy'],
		data(){
			return {
				GDMap: null,
				//H5
				longitude:'108.99569',
				latitude:'34.20124',
				covers:[],
				marker: null,
				currentXy:{
					gdx:'',
					gdy:'',
				}
			}
		},
		onLoad(){

		},
		mounted(){
			// #ifdef APP-PLUS
			this.longitude = this.gdx;
			this.latitude = this.gdy;
			this.covers.push({
				latitude: this.gdy,
				longitude: this.gdx,
				iconPath: '../../static/city-manage/case.png'
			})
			//APP定位
			this.geoLocation();
			// #endif
		},
		methods:{
			hideMask(){
				this.$emit('hideMap','false')
			},
			//初始化地图
			initMap(){
				this.GDMap = new AMap.Map('PublicMap', {
					zoom: 14,
					viewMode: '2D',
					center: [108.99569,34.20124],
					resizeEnable: true,
				});
				this.initPoint(this.gdx, this.gdy);
			},
			//APP定位
			geoLocation(){
				let _this = this;
				// uni.showLoading({
				// 	title:'定位中,确保允许访问位置信息'
				// });
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success (res) {
						_this.currentXy.gdx = res.longitude;
						_this.currentXy.gdy = res.latitude;
						_this.covers = [];
						_this.covers = [{
							id: 1,
							latitude: _this.currentXy.gdy,
							longitude: _this.currentXy.gdx,
							iconPath: '../../static/city-manage/uni-address.png'
						},{
							id: 2,
							latitude: _this.gdy,
							longitude: _this.gdx,
							iconPath: '../../static/city-manage/case.png'
						}];
						uni.hideLoading()
					}
				});
			},
			//H5定位
			initPoint(gdx, gdy){
				var icon = new AMap.Icon({
				    size: new AMap.Size(40, 50),    // 图标尺寸
				    //image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',  // Icon的图像
					image: '../../static/city-manage/case.png',
				    imageSize: new AMap.Size(25, 25)   // 根据所设置的大小拉伸或压缩图片
				});
				this.marker = new AMap.Marker({
					icon: icon,
					position: [gdx, gdy],
					offset: new AMap.Pixel(-13, -30)
				});
				this.marker.setMap(this.GDMap);
				this.GDMap.setCenter([gdx, gdy]);// 执行定位
			},
		}
	}
</script>

<style lang="scss">
	.map_box{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1999;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
	}
	// #ifdef H5
	#PublicMap{
		// width:560rpx;
		// height:940rpx;
		position: relative;
		top: 60rpx;
		left: 40rpx;
		background-color: #FFFFFF;
		height:1150rpx;
		width:670rpx;
	}
	// .H5_map{
	// 	width:600rpx;
	// 	height:1060rpx;
	// }
	// #endif
	// #ifdef APP-PLUS
	.close_map1{
		width:40rpx;
		height:40rpx;
		position: absolute;
		right: 45%;
		bottom: 40rpx;
		background: #fff;
		border: 4rpx solid #ccc;
		border-radius: 50%;
		padding: 10rpx;
		z-index: 999999;
	}
	.mapview{
		position: relative;
		top: 40rpx;
		left: 40rpx;
		background-color: #FFFFFF;
		//height:1150rpx;
		height:calc(100vh - 150rpx);
		width:670rpx;
		.H5_map{
			width:670rpx;
			// height:1000rpx;
			height:calc(100vh - 300rpx);
			margin-top: 20rpx;
			.imgSize{
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
				position: absolute;
				bottom: 220rpx;
				background-color: #FFFFFF;
			}
			.imgSize1{
				bottom: 258rpx;
			}
			.textSize{
				display: inline-block;
				position: absolute;
				bottom: 220rpx;
				left: 48rpx;
				height: 50rpx;
				width: 150rpx;
				text-align: center;
				line-height: 40rpx;
				background-color: #FFFFFF;
			}
			.textSize1{
				bottom: 258rpx;
			}
		}
	}

	// #endif
	.map_legend{
		box-shadow: #b5cede 0px 0px 10px;
		background: white;
		padding: 10rpx;
		position: absolute;
		bottom: 0;
		left: 0rpx;
		.legend_item{
			font-size: 24rpx;
			line-height: 50rpx;
			display: flex;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}


</style>
